<template>
  <div id="user_add">
    <Modal
      v-model="isShow"
      title="上传"
      @on-cancel="AddData = {}"
    >
      <Form ref="add" :model="AddData" :rules="AddRule" :label-width="90" >
        <FormItem label="文件名"  prop="file">
          <Row :gutter="30">
            <Col span="16">
              <Input v-model="value" placeholder="请选择文件" style="" disabled/>
            </Col>
            <Col  span="3">
              <Upload
                v-model="AddData.file"
                :before-upload="handleUpload"
                accept=".png"
                :format="['.png']"
                :max-size=102400
                action="#"
                ref="upload"
              >
                <Button size="small" type="warning">选择文件</Button>
              </Upload>
            </Col>
          </Row>
          <!-- <span style="margin-left: 10px">
              文件名称:
              <span v-if="AddData.file === null">未选择文件</span>
              <span v-if="AddData.file !== null">{{ AddData.file.name }}</span>
            </span> -->
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="verification" :loading="loadingStatus">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
// import { appVersionAdd } from '@/api/systemManage'
export default {
  name: 'UserAdd',
  data () {
    // 自定义验证 判断上传文件 fileList 的长度, 这样就和普通输入框表现一致了
    const validateUpload = (rule, value, callback) => {
      if (this.AddData.file === null) {
        callback(new Error('请选择要上传的文件'))
      } else {
        callback()
      }
    }
    return {
      value:'',
      /* 添加数据 */
      AddData: {
        remark: '',
        file: null
      },
      /* 表单验证规则 */
      AddRule: {
        file: [
          { required: true, validator: validateUpload, trigger: 'change' }
        ]
      },
      /* 新建框 */
      isShow: true,
      /* 上传过程中的加载状态控制 */
      loadingStatus: false
    }
  },
  mounted () {
    // this.init()
  },
  methods: {
    /* 上传excal坐标文件 */
    handleUpload (file) {
      // 将获取到的文件流赋值给fromData
      this.AddData.file = file
      // input 框填充文件名
      this.value = file.name;
      // 选择文件后触发验证关闭错误提示
      this.$refs['add'].validate(() => {})
    },
    /* 验证 */
    verification () {
       debugger
      console.log(11)
      this.loadingStatus = true
      
      this.$refs['add'].validate((valid) => {
        // debugger
        // this.value = this.AddData.file.name;
        console.log(this.AddData.file,"file")
        if (valid) {
          this.upload()
        } else {
          this.loadingStatus = false
        }
      })
    },
    /* 提交 */
    upload () {
      // 创建上传文件用的formData
      let param = new FormData()
      param.append('file', this.AddData.file)
      param.append('remark', this.AddData.remark)
      this.params = param

    }
  }
}
</script>


